import { Component, ElementRef, NgZone, OnInit, ViewChild } from '@angular/core';
import { Subscription, fromEvent, takeUntil } from 'rxjs';

import { BaseComponent } from '../base.component';

@Component({
  selector: 'bs-levitation-ball',
  templateUrl: './bs-levitation-ball.component.html',
  styleUrls: ['./bs-levitation-ball.component.less']
})
export class BsLevitationBallComponent extends BaseComponent implements OnInit {
  @ViewChild('ball', { static: true })
  ball!: ElementRef<HTMLDivElement>;

  private ballMoveSub?: Subscription;

  // 触摸点距离悬浮球左边距
  levitationBallLeft = 0;

  // 触摸点距离悬浮球上边距
  levitationBallTop = 0;

  flag: number = 0;

  constructor(private ngZone: NgZone) {
    super();
  }

  ngOnInit() {
    console.log();
    this.initSubscribe();
  }

  initSubscribe() {
    this.subscribeTouchStart();
    this.subscribeTouchEnd();
  }

  subscribeTouchStart() {
    const el = this.ball.nativeElement;
    fromEvent(el, 'touchstart')
      .pipe(takeUntil(this.unsubscribe$))
      .subscribe((e: any) => {
        this.ngZone.runOutsideAngular(() => {
          this.flag = 0;
          e.preventDefault(); //阻止触摸时页面的滚动，缩放
          this.levitationBallLeft = e.touches[0].clientX - el.offsetLeft;
          this.levitationBallTop = e.touches[0].clientY - el.offsetTop;
          this.subscribeTouchMove();
        });
      });
  }

  subscribeTouchMove() {
    const el = this.ball.nativeElement;
    this.ballMoveSub = fromEvent(el, 'touchmove').subscribe((e: any) => {
      this.ngZone.runOutsideAngular(() => {
        let actualDisplacementLeft: number, actualDisplacementTop: number;
        this.flag = 1;
        actualDisplacementLeft = e.touches[0].clientX - this.levitationBallLeft;
        actualDisplacementTop = e.touches[0].clientY - this.levitationBallTop;
        if (actualDisplacementLeft < 0) {
          //限制拖拽的X范围，不能拖出左边屏幕
          actualDisplacementLeft = 0;
        } else if (actualDisplacementLeft > document.documentElement.clientWidth - el.offsetWidth) {
          // 不能超出右边屏幕
          actualDisplacementLeft = document.documentElement.clientWidth - el.offsetWidth;
        }
        if (actualDisplacementTop < 0) {
          //限制拖拽的Y范围，不能拖出屏幕
          actualDisplacementTop = 0;
        } else if (actualDisplacementTop > document.documentElement.clientHeight - el.offsetHeight) {
          actualDisplacementTop = document.documentElement.clientHeight - el.offsetHeight;
        }
        el.style.left = `${actualDisplacementLeft}px`;
        el.style.top = `${actualDisplacementTop}px`;
      });
    });
  }

  subscribeTouchEnd() {
    const el = this.ball.nativeElement;
    fromEvent(el, 'touchend')
      .pipe(takeUntil(this.unsubscribe$))
      .subscribe(() => {
        this.ngZone.runOutsideAngular(() => {
          this.ballMoveSub?.unsubscribe();
          if (this.flag === 0) {
            this.navController.navigateForward('/tabs/home');
          }
        });
      });
  }

  ionViewWillLeave() {
    this.ballMoveSub?.unsubscribe();
  }
}
